<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view v-if="isLoaded">
			<view class="title-box">
				<view class="title">
					<view class="title1">
						<text class="title1-left">{{job_title}}</text>
						<text class="title1-right">{{salary}}元/天</text>
					</view>
					<text class="title2">发布时间：{{updatetime}}</text>
				</view>
			</view>
			<view class="detail">
				<text class="detail-title">
					职位描述
				</text>
				<text class="detail-content">{{description}}</text>
			</view>

			<view class="address">
				<text class="address-title">
					工作地址
				</text>
				<view class="address-content">
					<text class="address-content-left">{{location}}</text>
					<view class="address-content-right">
						<image class="address-content-right-img" src="/static/images/place.png" alt=""></image>
						<view>距离<text class="address-content-right-text">{{distance}}km</text></view>
					</view>
				</view>
				<view class="address-map">
					<map style="width: 100%; height: 100%;" :latitude="lat" :longitude="lng" :markers="covers"
						:controls="controls" @controltap="gps">
					</map>
				</view>
			</view>

			<view class="company">
				<text class="company-title">
					公司名称
				</text>
				<view class="company-content" @tap="goCompany">
					<image class="company-content-img" :src="logo" alt=""></image>
					<view class="company-content-right">
						<text class="company-content-right-title">{{company_name}}</text>
						<text class="company-content-right-text">在招职位{{num}}个</text>
					</view>
				</view>

				<!-- <view class="buttonss" v-if="job_status == 5">
					<image class="buttonss-img" src="/static/images/yiyuyue.png"></image>
				</view>
				<view class="buttonss" v-else-if="job_status == 10">
					<image class="buttonss-img" src="/static/images/yizhaoman.png"></image>
				</view>
				<view class="buttonss" v-else-if="job_status == 20">
					<image class="buttonss-img" src="/static/images/yikaigong.png"></image>
				</view>
				<view class="buttonss" v-else-if="job_status == 30">
					<image class="buttonss-img" src="/static/images/yiwanjie.png"></image>
				</view>
				<view class="buttonss" v-else-if="job_status == 40">
					<image class="buttonss-img" src="/static/images/yizhifuxinzi.png"></image>
				</view> -->
			</view>
			<view class="guard" v-if="job_status == 1">
				<view class="guard-title">
					<image src="/static/images/tishi.png" mode=""
						style="width: 26rpx;height:26rpx;margin-right: 10rpx;"></image>
					<text>廉德劳务提示</text>
				</view>
				<view class="guard-content">
					<navigator url="/pages6/pages/docs/avoid-fraud" style="display: inline;color:#007AFF">《防骗指南》
					</navigator>
					由廉德劳务用户提供，但联系时仍应注意识别信息真伪
				</view>
			</view>

			<view class="buttons" v-if="job_status == 1">
				<view class="buttons-content">
					<!-- <view class="buttons1" v-if="isCollect == 0" @tap="addCollect">
						<image class="buttons-img" src="@/static/images/soucahng1.png" alt=""></image>
						<view class="">
							收藏
						</view>
					</view>
					<view class="buttons1" v-if="isCollect == 1" @tap="delCollect">
						<image class="buttons-img" src="@/static/images/soucahng2.png" alt=""></image>
						<view class="" style="color:#f3431a">
							取消收藏
						</view>
					</view> -->

					<!-- #ifndef MP-WEIXIN -->
					<view class="buttons2" @tap="goshare">
						<image class="buttons-img2" src="@/static/images/fenxiang.png" alt=""></image>
						<view class="">
							分享
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<button class="buttons2" open-type="share">
						<view class="">
							分享
						</view>
					</button>

					<!-- #endif -->

					<!-- <view class="buttons3" @tap="talk">
						<image class="buttons-img" src="@/static/images/lijigoutong.png" alt=""></image>
						<view class="">
							立即沟通
						</view>
					</view> -->
					<view class="buttons3" @tap="applyJob">
						<image class="buttons-img3" src="@/static/images/jieshouzhiwei.png" alt="">
						</image>
						<view class="">
							预约职位
						</view>
					</view>
					<view class="buttons4" @tap="contact">
						<image class="buttons-img4" src="@/static/images/lianxidianhua.png" alt="">
						</image>
						<view class="">
							联系电话
						</view>
					</view>
				</view>
			</view>

			<view style="height:148rpx;background-color: #fff;" v-if="job_status == 1"></view>
		</view>
		<uni-popup ref="alertDialog1" type="dialog">
			<uni-popup-dialog :type="msgType" title="" content="" @confirm="dialogConfirm1">
				<view class="remember" style="display: flex;">
					我已阅读并同意
					<navigator url="/pages6/pages/docs/labor-contract" style="color:#f3431a">
						《劳动合同》
					</navigator>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog2" type="dialog">
			<uni-popup-dialog :type="msgType" title="下载确认" content="" @confirm="dialogConfirm2">
				<view class="remember">
					浏览器暂不支持该功能，请下载app
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog3" type="dialog">
			<uni-popup-dialog :type="msgType" title="分享确认" content="">
				<view style="font-size: 30rpx;">
					微信内置浏览器暂不支持该功能，若要分享，请点击右上角 <image src="/static/images/tupiansandian.png" alt=""
						style="width:68rpx;height:34rpx;margin:0 10rpx;">选择分享
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialog4" type="dialog">
			<uni-popup-dialog :type="msgType" title="" content="" @confirm="dialogConfirm4">
				<view class="remember" style="display: flex;">
					您当前未开通会员或会员已到期，开通会员即可无限次预约职位和拨打电话，是否需要立即开通？
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type}">
				<view class="" style="display: flex;flex-direction: column;align-items: center;width:436rpx;">
					<image src="/static/images/yuyuechenggong.png" mode="aspectFit" style="width:101rpx;height:111rpx;">
					</image>
					<text style="color:#f2451a;margin: 25upx;">恭喜您预约成功</text>
					<text style="font-size: 28rpx;">请您于{{beginTime}}到达</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	// import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				title: '招工详情',
				id: 0,
				isLoaded: false,
				cate: 0,

				job_title: '',
				salary: '',
				updatetime: '',
				description: '',
				location: '',
				logo: '',
				com_id: '',
				company_name: '',
				ipMaps: [],
				lat: '',
				lng: '',
				address: '',
				mobile: '',
				job_status: 0,
				beginTime: '',

				lat2: '',
				lng2: '',

				covers: [],
				controls: [],
				num: 0,
				distance: 0,

				msgType: 'info',
				type: 'center',

				//收藏
				isCollect: 0,
				shareNvue: '',
				applyJobNvue: '',
				openVipNvue: '',
				applySuccessNvue: '',

				webUrl: 'https://test.hnliandesy.com/h5/#/',
				noClick: true,

				deadTime: 0,
			}
		},

		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			return {
				title: this.title,
				path: '/pages1/pages/project-detail/project-detail?id=' + this.id
			}
		},
		// #endif

		components: {
			// Header,
			BottomTabbar,
			// UniPopup
		},

		// 页面生命周期，下拉刷新后触发
		// onPullDownRefresh() {
		// 	this.getInfo(this.id);

		// 	// 停止下拉刷新
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh()
		// 	}, 500)

		// },

		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option);
			this.id = option.id
			// this.title = option.title
			this.cate = uni.getStorageSync('cate')

			uni.showLoading({
				title: '加载中...'
			});
			this.getInfo(this.id);
			this.isLoaded = true;
			uni.hideLoading();

			// #ifdef APP-PLUS
			// 通过 id 获取 nvue 子窗体  
			this.shareNvue = uni.getSubNVueById('share-popup')
			this.applyJobNvue = uni.getSubNVueById('apply-job-popup')
			this.openVipNvue = uni.getSubNVueById('open-vip-popup')
			this.applySuccessNvue = uni.getSubNVueById('apply-success')

			uni.$on('shareCancle', () => {
				this.shareNvue.hide('fade-out', 100)
			})

			uni.$on('shareToHaoyou', () => {
				this.haoyou();
			})

			uni.$on('shareToPengyouquan', () => {
				this.pengyouquan();
			})

			uni.$on('shareToCopyUrl', () => {
				this.copyUrl();
			})

			uni.$on('confirmApplyJob', () => {
				this.applyJobNvue.hide('fade-out', 100)
				this.dialogConfirm1();
			})

			uni.$on('cancleApplyJob', () => {
				this.applyJobNvue.hide('fade-out', 100)
			})

			uni.$on('closeSuccess', () => {
				this.applySuccessNvue.hide('fade-out', 100)
			})

			// 开通vip
			uni.$on('cancleOpenVip', () => {
				this.openVipNvue.hide('fade-out', 100)
			})

			uni.$on('confirmOpenVip', () => {
				this.openVipNvue.hide('fade-out', 100)
				this.dialogConfirm4();
			})

			// #endif
		},
		methods: {
			async getBaseInfo(type = 'apply') {

				let token = uni.getStorageSync('token');
				let cate = 1;

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: cate,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				this.deadTime = info.dead_line;

				let time = Date.parse(new Date());
				if (parseInt(this.deadTime + '000') <= parseInt(time)) {
					// #ifndef APP-PLUS
					this.$refs.alertDialog4.open()
					// #endif
					// #ifdef APP-PLUS
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.$api.msg('您暂时不可预约，有问题请联系公司客服！')
						return false;
					} else {
						this.openVipNvue.show('fade-in', 100, function() {
							// 打开后进行一些操作...  
							//   
						});
					}

					// #endif
					return false;
				}

				if (type == 'apply') {
					// #ifdef APP-PLUS
					this.applyJobNvue.show('fade-in', 100, function() {
						// 打开后进行一些操作...  
						//   
					});
					// #endif

					// #ifdef H5
					this.$refs.alertDialog1.open()
					// #endif

					// #ifdef MP-WEIXIN
					this.$refs.alertDialog1.open()
					// #endif
				} else if (type == 'phone') {
					uni.makePhoneCall({
						phoneNumber: this.mobile
					});
				}
			},
			async getInfo(jobId) {
				let jobObj = await this.$myRequest({
					url: '/company/jobInfo/' + jobId
				})

				let jobInfo = jobObj.data.data;
				this.job_title = jobInfo.job_title
				this.salary = jobInfo.salary
				this.updatetime = jobInfo.updatetime
				this.description = jobInfo.description

				this.address = jobInfo.address
				this.location = jobInfo.location
				this.logo = jobInfo.logo
				this.com_id = jobInfo.com_id
				this.company_name = jobInfo.company_name
				this.mobile = jobInfo.mobile
				this.job_status = jobInfo.job_status
				this.beginTime = jobInfo.begin_date

				this.ipMaps = jobInfo.ip_maps

				//0是高德，1是腾讯，2是百度
				// #ifdef APP-PLUS
				this.lat = jobInfo.ip_maps[0][1];
				this.lng = jobInfo.ip_maps[0][0];
				// #endif

				// #ifdef H5
				this.lat = jobInfo.ip_maps[1][1];
				this.lng = jobInfo.ip_maps[1][0];
				// #endif

				// #ifdef MP-WEIXIN
				this.lat = jobInfo.ip_maps[1][1];
				this.lng = jobInfo.ip_maps[1][0];
				// #endif

				this.covers = [{
					latitude: parseFloat(this.lat),
					longitude: parseFloat(this.lng),

					iconPath: '/static/images/dituweizhi.png',
					callout: {
						bgColor: '#FFFFFF',
						color: '#333333',
						borderRadius: '5px',
						padding: '8px',
						content: this.location,
						display: 'ALWAYS',
					}
				}]

				this.controls = [{
					iconPath: '/static/images/daohanganniu.png',
					position: {
						left: 260,
						// #ifdef APP-PLUS
						top: 203,
						// #endif
						// #ifdef MP-WEIXIN
						top: 203,
						// #endif
						// #ifdef H5
						top: 180,
						// #endif
						height: 31,
						width: 53
					},
					clickable: true
				}]

				this.num = jobInfo.num

				this.getDistance(this.lat, this.lng)

				if (this.hasLogin && this.cate == 1) {
					let token = uni.getStorageSync('token')
					let res = await this.$myRequest({
						url: '/isCollectJob',
						data: {
							token: token,
							job_id: jobId
						},
						methods: 'POST'
					})

					if (res.data && res.data.data == 1) {
						this.isCollect = 1
					}
				}
			},

			async getDistance(lat1, lng1) {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.distance = this.$api.getMapDistance(lat1, lng1, res.latitude, res.longitude)
						this.lat2 = res.latitude;
						this.lng2 = res.longitude;
					},
					fail: (res) => {
						this.$api.msg('获取地址失败，将导致部分功能不可用')
					}
				});
			},

			//导航
			async gps() {
				//打开第三方地图
				//高德
				let latitude1 = parseFloat(this.ipMaps[0][1]); //要去的纬度-地址
				let longitude1 = parseFloat(this.ipMaps[0][0]); //要去的经度-地址
				//腾讯
				let latitude2 = parseFloat(this.ipMaps[1][1]); //要去的纬度-地址
				let longitude2 = parseFloat(this.ipMaps[1][0]); //要去的经度-地址
				//百度
				let latitude3 = parseFloat(this.ipMaps[2][1]); //要去的纬度-地址
				let longitude3 = parseFloat(this.ipMaps[2][0]); //要去的经度-地址

				let name = this.address; //地址名称
				let url = "";
				let that = this;
				// #ifdef MP-WEIXIN

				uni.openLocation({
					latitude: latitude2,
					longitude: longitude2,
					success: function() {
						// this.$api.msg('success:' + latitude2)
						console.log('success');
					},
					fail: function() {
						// this.$api.msg('error:' + latitude2)
						console.log('success');
					}
				});
				// #endif
				// #ifdef APP-PLUS
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "高德地图"
						}, {
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude1}&lon=${longitude1}&dev=0`;
								break;
							case 2:
								url =
									`qqmap://map/geocoder?coord=${latitude2},${longitude2}&referer=VUHBZ-42PAP-EMLD3-VCORN-OO2J5-FIF2P`;
								break;
							case 3:
								url =
									`baidumap://map/marker?location=${latitude3},${longitude3}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							default:
								break;
						}

						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]） 

					that.iosOpenMap(latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, name)
				}

				// #endif

				// #ifdef H5
				// console.log(latitude2)
				uni.navigateTo({
					url: '/pages/tx-map/tx-map?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
						latitude2 + ',' + longitude2 + '&referer=h5&key=VUHBZ-42PAP-EMLD3-VCORN-OO2J5-FIF2P'
				})
				// #endif
			},

			iosOpenMap(latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, name) {

				let url = ''
				plus.nativeUI.actionSheet({
					title: "选择地图应用",
					cancel: "取消",
					buttons: [{
						title: "高德地图"
					}, {
						title: "腾讯地图"
					}, {
						title: "百度地图"
					}]
				}, function(e) {

					switch (e.index) {
						case 1:
							url =
								`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude1}&lon=${longitude1}&dev=0`;
							break;
						case 2:
							url = `qqmap://map/geocoder?coord=${latitude2},${longitude2}&referer=xxx`;
							break;
						case 3:
							url =
								`baidumap://map/marker?location=${latitude3},${longitude3}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
							break;

						default:
							break;
					}
					if (url != "") {
						url = encodeURI(url);
						plus.runtime.openURL(url, function(e) {
							plus.nativeUI.alert("本机未安装指定的地图应用");
						});
					}
				})
			},

			async goCompany() {
				if (!this.hasLogin || this.cate != 1) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=1'
						})
					}, 1000)
					return false;
				}

				// uni.navigateTo({
				// 	url: '/pages/company-info/company-info?id=' + this.com_id
				// })
				this.$api.msg('暂无法查看！')
			},

			// 分享
			async goshare() {
				if (!this.hasLogin || this.cate != 1) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=1'
						})
					}, 1000)
					return false;
				}

				// #ifdef APP-PLUS

				if (uni.getSystemInfoSync().platform == 'ios') {
					if (plus.runtime.isApplicationExist({
							pname: 'com.tencent.mm',
							action: 'weixin://'
						})) {

					} else {
						this.$api.msg('尚未安装微信，暂时不可分享！');
						return false;
					}
				}

				// 打开 nvue 子窗体
				this.shareNvue.show('fade-in', 100, function() {
					// 打开后进行一些操作...  
					//   
				});
				// #endif

				// #ifdef H5
				if (this.$wechat && this.$wechat.isWechat()) {
					let locationHref = {
						url: window.location.href
					};

					let res = await this.$myRequest({
						url: '/getWxInfo',
						data: locationHref
					})

					if (res.data.status) {
						var jweixin = this.$wx

						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.data.signature, // 必填，签名，见微信开发文档附录1
							jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
						});
						jweixin.ready(() => {
							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
							//分享至微信好友
							jweixin.updateAppMessageShareData({
								title: this.job_title, // 分享标题
								desc: this.description, // 分享描述
								link: this.webUrl + "pages/project-detail/project-detail?id=" + this
									.id + "&title=" + this
									.title, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png', // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function() {
									// 用户点击了分享后执行的回调函数
									// console.log('分享给好友');

								}
							});
							//分享朋友圈
							jweixin.updateTimelineShareData({
								title: this.job_title, // 分享标题
								link: this.webUrl + "pages/project-detail/project-detail?id=" + this
									.id + "&title=" + this
									.title, // 分享链接
								imgUrl: 'https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png', // 分享图标
								success: function() {
									// 用户确认分享后执行的回调函数
									// console.log('分享到朋友圈');
								},

							});

						});
						jweixin.error(function(res) {
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							console.log('验证失败');
							console.log(res);
						});

						this.$refs.alertDialog3.open()
					}
				} else {
					this.$refs.alertDialog2.open()
				}
				// #endif
			},

			// async talk() {
			// 	if (!this.hasLogin) {
			// 		uni.navigateTo({
			// 			url: '/pages/login/login'
			// 		})
			// 	}
			// },

			async applyJob() {
				if (!this.hasLogin || this.cate != 1) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=1'
						})
					}, 1000)
					return false;
				}

				this.getBaseInfo('apply')
			},

			//申请职位提交
			async dialogConfirm1() {
				
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
				} else {
					setTimeout(() => {
						that.noClick = true;
					}, 3000)
					return false;
				}
				// console.log(that.noClick)
				uni.showLoading({
					title: '申请中'
				});
				let res = await this.$myRequest({
					url: '/applyJob',
					data: {
						token: uni.getStorageSync('token'),
						jobid: this.id
					},
					methods: 'post'
				})

				uni.hideLoading()

				switch (res.data.status) {
					case 1:
						uni.$emit('updateSendProjectsList');
						// this.$api.msg(res.data.msg, 'success', 1000);
						// #ifdef APP-PLUS
						uni.$emit('begin_time', {
							beginTime: this.beginTime
						})
						this.applySuccessNvue.show('fade-in', 100, function() {
							// 打开后进行一些操作...  
							//   
						});
						// #endif

						// #ifdef H5
						this.$refs.popup.open()
						// #endif

						this.getInfo(this.id);
						break;
					case 2:

						this.$api.msg(res.data.msg, 'none');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages6/pages/my/my'
							})
						}, 1000)
						break;
				}

			},

			//浏览器中下载app
			async dialogConfirm2() {
				window.location.href = "https://test.hnliandesy.com/loading.html"
			},

			// 去开通会员
			async dialogConfirm4() {
				uni.redirectTo({
					url: '/pages6/pages/my/user-vip'
				})
			},

			// async addCollect() {
			// 	if (!this.hasLogin || this.cate != 1) {
			// 		this.$api.msg('请先登录！');
			// 		setTimeout(() => {
			// 			uni.navigateTo({
			// 				url: '/pages/login/login?cate=1'
			// 			})
			// 		}, 1000)
			// 		return false;
			// 	}

			// 	let res = await this.$myRequest({
			// 		url: '/addCollectJob',
			// 		data: {
			// 			token: uni.getStorageSync('token'),
			// 			job_id: this.id
			// 		},
			// 		methods: 'post'
			// 	})
			// 	if (res.data.status >= 1) {
			// 		this.isCollect = 1;

			// 		uni.$emit('changeCollection');
			// 	}

			// 	this.$api.msg(res.data.msg)
			// },

			// async delCollect() {
			// 	if (!this.hasLogin || this.cate != 1) {
			// 		this.$api.msg('请先登录！');
			// 		setTimeout(() => {
			// 			uni.navigateTo({
			// 				url: '/pages/login/login?cate=1'
			// 			})
			// 		}, 1000)
			// 		return false;
			// 	}

			// 	let res = await this.$myRequest({
			// 		url: '/delCollectJob',
			// 		data: {
			// 			token: uni.getStorageSync('token'),
			// 			job_id: this.id
			// 		},
			// 		methods: 'post'
			// 	})
			// 	if (res.data.status >= 1) {
			// 		this.isCollect = 0;

			// 		uni.$emit('changeCollection');
			// 	}

			// 	this.$api.msg(res.data.msg)
			// },

			async haoyou() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.webUrl + "pages/project-detail/project-detail?id=" + this.id + "&title=" + this
						.title,
					title: this.job_title,
					summary: this.description,
					imageUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png",
					success: (res) => {
						this.$api.msg('分享成功', 'success');
					},
					fail: (err) => {
						this.$api.msg(JSON.stringify(err));
					}
				});
			},

			async pengyouquan() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: this.webUrl + "pages/project-detail/project-detail?id=" + this.id + "&title=" + this
						.title,
					title: this.job_title,
					summary: this.description,
					imageUrl: "https://liande.oss-cn-beijing.aliyuncs.com/pictures/jinjizhaoren.png",
					success: (res) => {
						this.$api.msg('分享成功', 'success');
					},
					fail: (err) => {
						this.$api.msg(JSON.stringify(err));
					}
				});
			},

			async copyUrl() {
				uni.setClipboardData({
					//准备复制的数据
					data: this.webUrl + "pages/project-detail/project-detail?id=" + this.id + "&title=" + this
						.title,
					success: (res) => {
						this.$api.msg('复制成功！')
					}
				})
			},

			async contact() {
				if (!this.hasLogin || this.cate != 1) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=1'
						})
					}, 1000)
					return false;
				}

				this.getBaseInfo('phone')
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-box {
		font-size: $font-base;
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif

		.title {
			width: 100%;
			padding: 31rpx 44rpx;
			background-color: #fff;
			line-height: 42rpx;
			/* position: relative; */
			border-bottom: 1px solid #f3f3f6;

			.title1 {
				display: flex;
				justify-content: space-between;
				height: 42rpx;
				padding-bottom: 4rpx;

				.title1-left {
					font-size: 30rpx;
					/* font-weight: bold; */
				}

				.title1-right {
					color: #f3431a;
				}
			}

			.title2 {
				height: 42rpx;
				color: #666666;
				font-size: $font-base;
			}
		}

	}

	.detail {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		line-height: 42rpx;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.detail-title {
			display: block;
			font-size: 30rpx;
			/* font-weight: bold; */
			padding-bottom: 4rpx;
		}

		.detail-content {
			color: #666666;
			font-size: $font-base;
		}
	}

	.address {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		line-height: 42rpx;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.address-title {
			font-size: 30rpx;
			/* font-weight: bold; */
			padding-bottom: 4rpx;
		}

		.address-content {
			color: #666666;
			position: relative;
			display: flex;
			justify-content: space-between;
			font-size: $font-base;

			.address-content-left {
				max-width: 58%;
				line-height: 38rpx;
			}

			.address-content-right {
				height: 40rpx !important;
				line-height: 40rpx;
				display: flex;
				align-items: center;

				.address-content-right-img {
					height: 32rpx;
					margin-right: 22rpx;
					width: 26rpx;
				}

				.address-content-right-text {
					color: #146eba;
				}
			}
		}

		.address-map {
			height: 500rpx;
			margin-top: 10rpx;
			position: relative;

		}
	}

	.company {
		width: 100%;
		padding: 31rpx 44rpx;
		background-color: #fff;
		position: relative;
		/* border-bottom: 1px solid #f3f3f6; */

		.company-title {
			font-size: $font-base;
			/* font-weight: bold; */
			height: 42rpx;
			line-height: 42rpx;
		}

		.company-content {
			font-size: $font-base;
			height: 126rpx;
			display: flex;
			/* justify-content: space-between;
			align-items: center; */
			margin-top: 20rpx;
			position: relative;

			.company-content-img {
				width: 112rpx;
				height: 126rpx;
				margin-right: 34rpx;
			}

			.company-content-right {
				padding-top: 20rpx;
				height: 126rpx;
				display: flex;
				flex-direction: column;
				line-height: 48rpx;

				.company-content-right-title {
					font-size: $font-base;
					/* font-weight: bold; */
				}

				.company-content-right-text {
					color: #666666;
				}
			}
		}

		.buttonss {
			position: absolute;
			bottom: -60rpx;
			left: 60%;

			.buttonss-img {
				width: 172rpx;
				height: 172rpx;
			}
		}

	}

	.buttons {
		width: 100%;
		height: 148rpx;
		background-color: #f8f8f8;
		position: fixed;
		bottom: 0;
		font-size: $font-base;
		display: flex;
		align-items: center;

		.buttons-content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;

			.buttons2 {
				width: 156rpx;
				text-align: center;
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				margin: 0;

				.buttons-img2 {
					width: 42rpx;
					height: 35rpx;
					margin-bottom: 8rpx;
				}
			}

			.buttons3 {
				width: 250rpx;
				height: 78rpx;
				line-height: 78rpx;
				background-color: #0091ff;
				display: inline-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 10rpx;
				/* margin-right: 55rpx; */

				.buttons-img3 {
					width: 36rpx;
					height: 36rpx;
					margin-right: 18rpx;
				}
			}

			.buttons4 {
				width: 250rpx;
				height: 78rpx;
				line-height: 78rpx;
				background-color: $base-color;
				display: inline-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 10rpx;

				.buttons-img4 {
					width: 41rpx;
					height: 41rpx;
					margin-right: 18rpx;
				}
			}
		}
	}

	.guard {
		font-size: $font-base;
		padding: 31rpx 44rpx;
		border-top: 1px solid #f3f3f6;
		background-color: #fff;

		.guard-title {
			color: $base-color;
			height: 52rpx;
			line-height: 52rpx;
		}

		.guard-content {
			font-size: 28rpx;
		}
	}

	.mark {
		font-size: $font-base;
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;

		.banks-list {
			position: absolute;
			height: 496rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list-content {
				.banks-list1 {
					height: 230rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					margin: 0 66rpx;

					.banks-list1-item {
						width: 33.3%;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}

				.banks-list2 {
					position: relative;
					height: 176rpx;
					border-top: 1px solid #f3f3f6;

					.banks-list2-cancle {
						position: absolute;
						margin: auto;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;

						width: 80%;
						background-color: #f2451a;
						color: #fff;
						height: 82rpx;
						border-radius: 82rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

			}

			.banks-list-button {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
			}
		}
	}

	.images {
		width: 102rpx;
		height: 102rpx;
	}

	.texts {
		margin-top: 20rpx;
		color: #737373
	}
</style>